<template>
  <div class="singer_box">
    <div class="top_box ">
      <div class="img_box">
        <img :src="info.picUrl + '?param=200y200'" alt="" />
      </div>
      <div class="info_box">
        <div class="title_box">
          <div class="describe">歌手</div>
          <div class="name">{{ info.name }}</div>
        </div>
        <ul>
          <li>
            <span class="iconfont icon-yinyue"></span>
            <span>单曲数：{{ info.musicSize }}</span>
          </li>
          <li>
            <span class="iconfont icon-zhuanji"></span>
            <span>专辑数：{{ albums.length }}</span>
          </li>
          <li>
            <span class="iconfont icon-mv1"></span>
            <span>MV数：{{ mvs.length }}</span>
          </li>
          <!-- <li>
            <span class="iconfont icon-jita"></span>
            <span>演出数：</span>
          </li> -->
        </ul>
      </div>
      <div class="collect">
        <div>
          <span class="iconfont icon-shoucang"></span>
          <span>收藏</span>
        </div>
      </div>
    </div>
    <el-tabs class="bottom_box" v-model="tarbar">
      <el-tab-pane label="专辑" name="album">
        <div class=" album">
          <div v-for="(item, index) in albums" :key="index" class="album_item">
            <div class="album_img">
              <img :src="item.picUrl + '?param=200y200'" alt="" />
            </div>
            <div class="album_name">
              {{ item.name }}
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="热门单曲" name="single">
        <div class="single">
          <table cellspacing="0" class="el-table playlit-table" stripe>
            <thead>
              <th class="sort"></th>
              <th class="opera">操作</th>
              <th>音乐图片</th>
              <th>音乐标题</th>
              <th class="zj">专辑</th>
              <th class="time">时长</th>
            </thead>
            <tbody>
              <tr
                class="el-table__row"
                v-for="(item, index) in hotSongs"
                :key="index"
                @click="playMusic(item)"
              >
                <td
                  class="td_sort"
                  style="width:50px;textAlign:center"
                  v-html="index + 1 < 10 ? '0' + (index + 1) : index + 1"
                ></td>
                <td class="td_opera" style="width:70px">
                  <span class="iconfont icon-shoucang"></span>
                  <span class="iconfont icon-xiazai"></span>
                </td>
                <td>
                  <div class="img-wrap">
                    <img :src="item.al.picUrl + '?param=100y100'" alt />
                    <span class="iconfont icon-triangle-down"></span>
                  </div>
                </td>
                <td>
                  <div class="song-wrap">
                    <div class="name-wrap">
                      <!-- 名称 -->
                      <span>{{ item.name }}</span>
                      <!-- mv图标 -->
                      <span
                        v-if="item.mvid !== 0"
                        class="iconfont icon-mv"
                      ></span>
                    </div>
                  </div>
                </td>
                <td class="td_zj">{{ item.al.name }}</td>
                <td class="td_time" style="width:80px;textAlign:center">
                  {{ item.dt | formDate }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="MV" name="mv">
        <div class="mvs">
          <div
            class="item"
            @click="toMv(item.id)"
            v-for="(item, index) in mvs"
            :key="index"
          >
            <div class="img-wrap">
              <img :src="item.imgurl + '?param=200y200'" alt />
              <div class="num-wrap">
                <div class="iconfont icon-shipin"></div>
                <div class="num">{{ item.playCount | count }}</div>
              </div>
              <div class="iconbox">
                <span class="iconfont icon-triangle-down"></span>
              </div>
            </div>
            <div class="info-wrap">
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="歌手详情" name="info">
        <div class="desc">
          {{ desc }}
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="相似歌手" name="similar">
        
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script>
import request from "../../../../api/request"
export default {
  data() {
    return {
      tarbar: "album",
      type: 1,
      page: 1,
      songs: [],
      lists: [],
      id: null,
      img: null,
      desc: null,
      info: {
        picUrl: "",
        name: "",
      },
      albums: [],
      hotSongs: [],
      mvs: [],
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getSingerInfo()
    this.getAlbum()
    this.getSingle()
    this.getSingerMv()
    // this.getSimilarSinger()
  },
  methods: {
    // 点击播放歌曲
    async playMusic(item) {
      this.$store.dispatch("getSong", { id: item.id, autoplay: true })
    },
    //   歌手详情
    async getSingerInfo() {
      let res = await request({
        url: "/artist/desc",
        data: {
          id: this.id,
        },
        method: "get",
      })
      this.desc = res.briefDesc
    },
    // 获取歌手专辑
    async getAlbum() {
      let res = await request({
        url: "/artist/album",
        data: {
          id: this.id,
        },
        method: "get",
      })
      this.info = res.artist
      this.albums = res.hotAlbums
    },
    // 获取专辑详情
    async getAlbumInfo(id) {
      let res = await request({
        url: "/album",
        data: {
          id,
        },
        method: "get",
      })
    },
    // 获取歌手单曲
    async getSingle() {
      let res = await request({
        url: "/artists",
        data: {
          id: this.id,
        },
        method: "get",
      })
      this.hotSongs = res.hotSongs
    },
    // 获取歌手MV
    async getSingerMv() {
      let res = await request({
        url: "/artist/mv",
        data: {
          id: this.id,
        },
        method: "get",
      })
      this.mvs = res.mvs
    },
    // 获取相似歌手
    async getSimilarSinger() {
      let res = await request({
        url: "/simi/artist",
        data: {
          id: this.id,
        },
        method: "get",
      })
      //   this.similar = res.mvs
      console.log(res)
    },
    toMv(id) {
      this.$router.push(`/home/mvInfo?id=${id}`)
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../../../../static/scss/common.scss";
@import "./singer.scss";
</style>
